<template>
	<view>
		<view class="search">
			<u-search placeholder="请输入关键字" v-model="keyword"></u-search>

		</view>
	

		<view class="empty" v-if="empty == 1">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>

		<u-sticky offset-top="35" v-else>
			<view class="Box">
				<u-list @scrolltolower="scrolltolower" scrollTop="50">
					<u-list-item v-for="(item, index) in productdata" :key="index">
						<view class="goods" @click="toInfo(item.id)">
							<view class="goods-left">
								<image :src="item.thumbs_text[0]" lazy-load></image>
							</view>
							<view class="goods-right">
								<view class="txt-line2"><text class="tag">{{ item[reflectKey.platform] || '奢总汇' }}</text>
									<span v-if="item.soure=='hire'">{{
										item.brankname_text + item.btypename_text + item.name }}</span>
									<span v-else>{{
										item.brankname_text + item.btypename_text + item.code }}</span>
								</view>
								<view>
									<view class="coupon">
										<text>50元券</text>
									</view>
									<view class="bottom-txt">
										<view>
											<text class="price">￥{{ item.price }}</text>
											<text class="del-price">￥600</text>
										</view>
										<view class="sale-num"><text>已售300</text></view>
									</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</u-sticky>



	</view>
</template>
<script>

export default {
	onLoad(options) {

		this.ptypeid = options.ptypeid ? options.ptypeid : 0
		this.brand_id = options.brand_id ? options.brand_id : 0
		this.btypeid = options.btypeid ? options.btypeid : 0

		this.getproductdata()
		setTimeout(() => {
			this.filterData = data;
		}, 100);

	},

	data() {
		return {
			btypeid: 0,
			empty: 0,
			brand_id: 0,
			filterData: [],
			indexArr: "",
			valueArr: "",
			productdata: [],
			ptypeid: 0,

			keyword: '请输入关键字',
			prolist: [
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
				{
					thumb: '../../static/images/user/avatar.jpg',
					price: 2323,
					delPrice: 1321,
					saleNum: 3223,
					title: "注意：导入uni_modules规范插件需要使用 3.1.0 以上版本的 HBuilderX"

				},
			],
		}
	},



	methods: {


		// 去到商品详情页
		toInfo(e) {
			uni.$u.route({
				url: "pagesA/product/info",
				params: {
					proid: e
				}
			})
		},
		// 获取品牌系列的所以数据
		async getproductdata() {
			let data = {
				btypeid: this.btypeid,
				brand_id: this.brand_id,
				ptypeid: this.ptypeid
			}
			let result = await this.$u.api.product.prolist(data)
			if (result.code) {
				if (result.data.length > 0) {
					this.empty = 0
					this.productdata = result.data
				} else {
					this.empty = 1
				}
			} else {
				this.empty = 1

			}
		},
		confirm(e) {
			this.indexArr = e.index;
			this.valueArr = e.value;

			console.log(this.indexArr)
			console.log(this.valueArr)

		},
		scrolltolower() {
			console.log("下拉刷新")
		},
		test() {
			console.log('this ia test')
		},

	}

	}
</script>
<style lang="scss" scoped>
.goods {
	padding: 30rpx;
	padding-bottom: 20rpx;
	display: flex;
	font-size: 28rpx;
}

.goods-left {
	flex: 0 0 35%;
	margin-right: 30rpx;

	image {
		width: 100%;
		height: 250rpx;
		border-radius: 5px;
	}
}

.goods-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.bottom {
		margin-bottom: 4px;
		font-weight: normal;
	}

	.tag {
		background-color: red;
		color: #fff;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 1;
		padding: 4rpx 6rpx;
		border-radius: 4px;
		margin-right: 4px;
	}
}

.coupon {
	padding: 10rpx 30rpx;
	width: 40%;
	background-image: url('../../static/coupon1.png');
	background-size: 100% 100%;
	color: #fff;
	font-size: 24rpx;
	font-weight: normal;
	margin-bottom: 10rpx;
}

.Box {
	margin-top: 70px;
	width: 100%;
	height: 560px;
	overflow: hidden;


}

.bottom-txt {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	.price {
		color: red;
		font-size: 40rpx;
		font-weight: 600;

		text {
			font-size: 24rpx;
		}
	}

	.del-price {
		color: #666;
		font-weight: 600;
		font-size: 24rpx;
		text-decoration: line-through;
		margin-left: 4px;
	}

	.sale-num {
		color: #888;
		font-size: 24rpx;
		font-weight: normal;
		margin-bottom: 2px;
	}
}

.flex {
	display: flex;
}

.txt-line2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
</style>
